<template>
  <div>
<!--    <el-row :gutter="20">-->
<!--      <el-col :span="3" :offset="1">-->
<!--        <el-input-->
<!--          placeholder="请输入被试编号"-->
<!--          v-model="input"-->
<!--          :disabled="false"-->
<!--        >-->
<!--        </el-input>-->
<!--      </el-col>-->
<!--      <el-col :span="6">-->
<!--        <el-button plain style="margin-bottom: 20px" type="primary" @click="">查询</el-button>-->
<!--      </el-col>-->
<!--    </el-row>-->
    <el-row>
      <el-col :span="10" :offset="1">
        <el-descriptions title="受试者信息" :column="1" style="margin-top: 20px">
          <el-descriptions-item label="姓名">{{ subeject_info.name }}</el-descriptions-item>
          <el-descriptions-item label="性别">{{ subeject_info.sex==1?'男':'女' }}</el-descriptions-item>
          <el-descriptions-item label="出生日期">{{ subeject_info.birthday.split(" ")[0]}}</el-descriptions-item>
<!--          <el-descriptions-item label="采样率">{{ subeject_info.srate }}</el-descriptions-item>-->
          <el-descriptions-item label="编号">{{ subeject_info.testeeNo }}</el-descriptions-item>
<!--          <el-descriptions-item label="课题">{{ subeject_info.research }}</el-descriptions-item>-->
        </el-descriptions>
      </el-col>
      <el-col :span="10" >
<!--        <el-button plain type="primary" @click="jump()" style="margin-top: 20px">编辑任务信息</el-button>-->
        <el-table
          stripe
          :data="tableData"
          :height="200"
          style="width: 100%;margin-top: 20px">
          <el-table-column
            prop="experimentName"
            label="实验任务名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="testeeState"
            label="实验任务类型"
            width="180">
          </el-table-column>
          <el-table-column
            prop="experimentDuration"
            label="实验任务时长">
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  <div>
    <div class="task" v-for="(item) in v_data" :key="item.code"
         style="width: 100%;margin-bottom: 30px;margin-top: 30px;">
      <el-col :offset="1">
        <el-tag :span="4" type="info">{{ item.code }}</el-tag>
        <el-tag :span="4" type="info">{{ item.name }}</el-tag>
        <el-button plain :span="4" type="primary" style="margin-bottom: 20px;margin-left: 20px" @click="addData(item.code)" :disabled="!isCollectRole">添加</el-button>
      </el-col>

      <el-col :span="4" v-for="(item1) in getByVCode(item.code)" :key="item1[0].experimentId" :offset="1">
        <h3 style="font-size: 25rem;" >{{item1[0].experimentName}}</h3>
        <el-carousel trigger="click" height="500px" :autoplay="false" :loop="false">
          <el-carousel-item v-for="item2 in item1" :key="item2.id">
                      <el-descriptions  :column="1" border>
                        <el-descriptions-item label="配合程度" labelStyle="width: 100px;">{{ getChinese(item2.testeeCompliance) }}</el-descriptions-item>
                        <el-descriptions-item label="数据质量">{{ getChinese(item2.dataQuality) }}</el-descriptions-item>
                        <el-descriptions-item label="设备">{{ item2.equipmentName }}</el-descriptions-item>
                        <el-descriptions-item label="被试数据" labelStyle="height: 80px">{{ item2.testeeExperimentFileName }}<el-button @click="download(item2)">下载</el-button></el-descriptions-item>
<!--                        <el-descriptions-item label="被试数据" labelStyle="height: 80px">{{ item2.testeeExperimentFileName }}</el-descriptions-item>-->
<!--                        <el-descriptions-item label="被试数据" contentStyle=""><descriptions-tooltip :value=item2.testeeExperimentFileName></descriptions-tooltip></el-descriptions-item>-->
                        <el-descriptions-item label="QA">{{ item2.qa==-1?"未包含QA文件":item2.qa}}</el-descriptions-item>
                        <el-descriptions-item label="数据大小">{{ ((item2.totalSize/1024)/1024).toFixed(2) + 'M' }}</el-descriptions-item>
                      </el-descriptions>
            <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="'描述：'+item2.description"
              :readonly="true"
              :autosize="{ minRows: 4, maxRows: 4}"
            >
            </el-input>
            <el-button round plain type="primary" size="mini" icon="el-icon-edit" @click="Edit(item2.id,item.code)"
                       style="" :disabled="!isCollectRole"></el-button>
            <el-button round plain type="primary" style="float:right" size="mini" icon="el-icon-delete"
                       @click="Delete(item2.id)" :disabled="!isCollectRole"></el-button>
          </el-carousel-item>
        </el-carousel>
      </el-col>


    </div>
  </div>
  <UploadUpdate v-if="updateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></UploadUpdate>


  </div>


</template>
<script>
import UploadUpdate from './upload-update'
import subject from '../../api/subject'
import task from '@/api/task'
import data from '../../api/data'
import descriptionsTooltip from '../../components/tooltip'
import research from '@/api/research'
import myUtils from '../../api/myUtils'
import downloadFile from '../../api/downloadFile'
import process from 'shelljs'
export default {
  components: { UploadUpdate ,descriptionsTooltip},
  data() {
    return {
      input:'',
      sign:0,
      updateVisible: false,
      subeject_info: {
        name:""
      },
      isCollectRole:false,
      tableData: [
      ],
      subject_data:{},
      //这个要根据同步过来的数据改
      v_data:[{"name":"基线","code":"v1","order":1},{"name":"1年随访","code":"v2","order":2}]

    }

  },
  methods: {
    Edit(id,code)
    {
      this.updateVisible = true
      function getbycode(element)
      {
        return element.code == code
      }
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(this.v_data.find(getbycode),id)
      })

    },
    Delete(id)
    {
      this.$confirm(
        `确定对该数据进行删除操作?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        data.deleteData(id).then(({ code }) => {
          if (code === '000000') {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 700,
              onClose: () => {
                this.getDataList()
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })

      })



    },
    getChinese(num)
    {
      if(num==1)
      {
        return '低'
      }
      if(num==2)
      {
        return '中'
      }
      if(num==3)
      {
        return '高'
      }

    },
    getByVCode(code){
      var record = [];
      var result = [];
      if(this.subject_data==null)
      {
        return {}
      }
      if(this.subject_data[0]==undefined)
      {
        return {}

      }
      this.subject_data.forEach(
        item=>
        {

          if(item.vpCode==code)
          {
            record =  item.testeeExperimentList;

          }
        }

      )

      function HashMap(){

        this.map = {};

      }

      HashMap.prototype = {

        put : function(key , value){// 向Map中增加元素（key, value)

          this.map[key] = value;

        },

        get : function(key){ //获取指定Key的元素值Value，失败返回Null

          if(this.map.hasOwnProperty(key)){

            return this.map[key];

          }

          return null;

        },

        remove : function(key){ // 删除指定Key的元素，成功返回True，失败返回False

          if(this.map.hasOwnProperty(key)){

            return delete this.map[key];

          }

          return false;

        },

        removeAll : function(){  //清空HashMap所有元素

          this.map = {};

        },

        keySet : function(){ //获取Map中所有KEY的数组（Array）

          var _keys = [];

          for(var i in this.map){

            _keys.push(i);

          }

          return _keys;

        }

      };

      HashMap.prototype.constructor = HashMap;



      var map = new HashMap();
      var arr_task = []

      record.forEach(
        item=>{
          if(map.get(item.experimentId)==null)
          {
            var arr = []
            arr_task.push(item.experimentId)
            arr.push(item)
            map.put(item.experimentId,arr)
          }
          else{
            arr = map.get(item.experimentId)
            arr.push(item)
          }
        }
      )

      var result = []
      for(let i=0;i<arr_task.length;i++)
      {
        result.push(map.get(arr_task[i]))
      }

      //console.log(result)
      return result


    },
    getDataList()
    {
      data.getTesteeVisitExperiment(this.$route.query.testeeNo).then(
        response=>{
          this.subject_data = response.data;
          this.getVCode();
        }
      )
    },
    getVCode()
    {

      research.getBysubjectPkId(this.$route.query.subjectPkId).then((response) => {
        var data = response.data;

        this.v_data = eval(data.vpInfo);//json String格式转成数组对象
      })

    },


    addData(code) {
      this.updateVisible = true
      function getbycode(element)
      {
        return element.code == code
      }
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(this.v_data.find(getbycode),0)
      })

    },
    getSubjectInfo()
    {
      // console.log("aaaaaaa")
      // console.log(this.$route.query)
      subject.getById(this.$route.query.testeeNo).then((response)=>{
        if(response.code=='000000')
        {
          this.subeject_info = response.data;
        }
      })

    },
    getTaskInfo()
    {

      task.experimentSearch(this.$route.query.subjectPkId).then((response)=>{
        if(response.code=='000000')
        {
          this.tableData = response.data.records;
          this.tableData.forEach(
            item=>{
              if(item.testeeState==0)
              {
                item.testeeState = '静息态'


              }
              else{
                item.testeeState = '任务态'
              }
              item.experimentDuration = item.experimentDuration + '分钟'
            }
          )
          this.sign = 1;
        }
      })

    },
    download(item){
      // console.log(item)
      let role = myUtils.getRole(this.$route.query.subjectPkId, this.$store.getters.roles, this.$store.getters.isSystemAdministrator);
      if((role === 1 && item.modifyPin === this.$store.getters.roles[0].userPkId) || role !== 1){
        // console.log("下！")
        let filePath = item.testeeExperimentFilePath
        // console.log(filePath)
        // console.log("下！")
        let DownloadUrl = process.env.BASE_API + '/testee/file/download?filePath=' + filePath
        window.open(DownloadUrl)
      }else{
        this.$message.error("没有下载权限");
      }
    },
    jump(){
      // console.log("走")
      // console.log(this.$route.query.subjectPkId)
      this.$router.push({path:`/upload/task?subjectPkId=${this.$route.query.subjectPkId}`})
    }

  },
  created() {
    //console.log(this.v_data)
    let width = document.body.clientWidth;
    console.log(width)
    let fontsize = width / 2203
    document.documentElement.style.fontSize = fontsize + "px"
  },
  mounted() {

    let role =myUtils.getRole(this.$route.query.subjectPkId,this.$store.getters.roles,this.$store.getters.isSystemAdministrator);


    this.getSubjectInfo();
    this.getTaskInfo();
    this.getDataList()
      //this.getVCode();

    if(role==1 || role==3 || role==5 || role==7)
    {
      this.isCollectRole = true;
    }
  },

}
</script>
<style>


</style>
